<template>
  <div class="product-details">
    <Search></Search>
    
    <div class="container">
      <!-- 商品主体信息 -->
      <div class="product-main">
        <!-- 商品统计信息 -->
        <div class="product-stats">
          <el-badge value="new" type="warning" v-if="isNew">
            <span>发布于: {{data.creattime}}</span>
          </el-badge>
          <span v-else>发布于: {{data.creattime}}</span>
          
          <span class="view-text">
            浏览次数: {{data.clicks}}
          </span>
          
          <div class="status-badges">
            <!-- 交易方式徽章 -->
            <el-badge :value="data.deal" type="info" class="status-badge"/>
            
            <!-- 商品状态徽章 -->
            <el-badge 
              :value="data.status === '1' ? '在售' : '已售出'" 
              :type="data.status === '1' ? 'success' : 'info'"
              class="status-badge"
            />
            
            <!-- 商品状态徽章 -->
            <el-badge 
              v-if="data.opstatus"
              :value="getOpStatusText(data.opstatus)"
              :type="getOpStatusType(data.opstatus)"
              class="status-badge"
            />
          </div>
        </div>

        <!-- 商品展示区 -->
        <div class="product-showcase">
          <!-- 商品图片 -->
          <div class="product-images">
            <div class="main-image">
              <img :src="imgblur" alt="商品图片">
            </div>
            <div class="image-list">
              <div class="image-item" 
                   v-for="item in data.images" 
                   :key="item"
                   @click="switchImg(item)">
                <img :src="item" alt="商品图片">
              </div>
            </div>
          </div>

          <!-- 商品信息 -->
          <div class="product-info">
            <div class="product-header">
              <h1 class="product-title">{{data.name}}</h1>
              <div class="favorite-btn" v-if="$store.state.userid !== data.uid">
                <i class="el-icon-star-off" :class="{'is-favorite': love}" @click="addLove(data.id)"></i>
              </div>
              <el-tag v-else type="info" size="small">我发布的商品</el-tag>
            </div>

            <div class="product-meta">
              <div class="meta-item">
                <span class="label">价格</span>
                <span class="price">¥{{data.currentprice}}</span>
                <el-tag type="danger" size="small" class="discount-tag" v-if="discount">
                  {{discount}}折
                </el-tag>
              </div>
              <div class="meta-item">
                <span class="label">原价</span>
                <span class="original-price">¥{{data.originalprice}}</span>
              </div>
              <!-- 其他商品信息... -->
            </div>

            <!-- 新增卖家信息展示区 -->
            <div class="vendor-info" v-if="vendor && vendor.username">
              <h2 class="section-title">
                <i class="el-icon-user"></i>
                卖家信息
              </h2>
              <div class="vendor-details">
                <div class="vendor-avatar">
                  <img :src="vendor.userimgpath" alt="卖家头像">
                </div>
                <div class="vendor-basic-info">
                  <div class="vendor-name">用户名: {{vendor.username}}</div>
                  <div class="vendor-contact">
                    <span>联系电话: {{vendor.phonenumber}}</span>
                    <span>邮箱: {{vendor.mail}}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 卖家信息展示区结束 -->

            <!-- 购买按钮 -->
            <div class="action-buttons">
              <template v-if="data.deal==='线上交易'">
                <el-button type="primary" @click="buy">立即购买</el-button>
                <el-button @click="addCart(data.id)" :disabled="isInCart">
                  {{ isInCart ? '已加入购物车' : '加入购物车' }}
                </el-button>
              </template>
              <template v-else>
                <el-button type="primary" @click="showUserInfo(data.uid)">
                  查看卖家联系方式
                </el-button>
              </template>
            </div>
          </div>
        </div>

        <!-- 商品描述 -->
        <div class="product-description">
          <h2 class="section-title">
            <i class="el-icon-document"></i>
            商品描述
          </h2>
          <div class="description-content">
            <p>{{data.details}}</p>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
          <!-- 评论统计 -->
          <div class="comments-header">
            <h2 class="section-title">
              <i class="el-icon-chat-line-square"></i>
              <span>{{totalCount}}条评论</span>
            </h2>
            <span class="refresh-btn" @click="refresh">
              <i class="el-icon-refresh-right"></i>刷新
            </span>
          </div>

          <!-- 评论输入框 -->
          <div class="comment-input" v-if="User">
            <div class="user-avatar">
              <img :src="User.userimgpath" alt="用户头像">
            </div>
            <div class="input-wrapper">
              <textarea 
                v-model="textarea"
                :class="{'is-focused': backcolor}"
                placeholder="请文明发言..."
                @mouseenter="enter"
                @mouseleave="leave">
              </textarea>
              <div class="comment-footer">
                <el-button type="primary" 
                          @click="insertComment(data.id)"
                          size="small">
                  发表评论
                </el-button>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <ul>
              <li v-for="item in comments.slice((currentPage-1)*PageSize,currentPage*PageSize)" 
                  :key="item.id" 
                  class="comment-item">
                <div class="comment-wrapper">
                  <div class="comment-user">
                    <div class="user-avatar">
                      <img :src="item.userimgpath" alt="用户头像"/>
                    </div>
                    <div class="user-info">
                      <div class="username">{{item.username}}</div>
                      <div class="comment-time">{{item.time}}</div>
                    </div>
                    <div class="comment-tags">
                      <el-tag size="mini" type="success" v-if="item.text.length > 20">优质评论</el-tag>
                    </div>
                  </div>
                  <div class="comment-content">
                    <p class="comment-text">{{item.text}}</p>
                  </div>
                </div>
              </li>
            </ul>
            
            <!-- 分页 -->
            <div class="pagination-wrapper" v-if="comments !== ''">
              <el-pagination
                background
                layout="total,prev, pager, next,jumper"
                :page-size="PageSize"
                prev-text="上一页"
                next-text="下一页"
                :total="totalCount"
                @current-change="CurrentChange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单创建弹窗 -->
    <div v-if="outerVisible" class="mobile-order-page">
      <div class="mobile-order-header">
        <i class="el-icon-arrow-left" @click="outerVisible = false"></i>
        <span>填写订单</span>
        <div></div>
      </div>

      <div class="mobile-order-content">
        <!-- 商品信息 -->
        <div class="mobile-product-card">
          <img :src="imgblur" :alt="data.name">
          <div class="product-info">
            <h3>{{data.name}}</h3>
            <p class="desc">{{data.details}}</p>
            <div class="price">¥{{data.currentprice}}</div>
          </div>
        </div>

        <!-- 表单信息 -->
        <div class="mobile-form">
          <el-form 
            ref="userbuy" 
            :model="userbuy" 
            :rules="rules"
            label-position="top"
            class="order-form"
          >
            <el-form-item label="收货人" prop="username">
              <el-input v-model="userbuy.username" placeholder="请输入收货人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phonenumber">
              <el-input v-model.number="userbuy.phonenumber" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" prop="mail">
              <el-input v-model="userbuy.mail" placeholder="用于接收订单通知"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-input v-model="userbuy.address" type="textarea" :rows="2" placeholder="请输入详细收货地址"></el-input>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input 
                v-model="remark" 
                type="textarea" 
                :rows="2"
                placeholder="选填，请先和卖家协商一致">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 底部提交栏 -->
      <div class="mobile-order-footer">
        <div class="total-price">
          <span>实付款：</span>
          <span class="amount">¥{{data.currentprice}}</span>
        </div>
        <el-button type="primary" @click="createOrder">提交订单</el-button>
      </div>
    </div>

    <!-- 支付订单弹窗 -->
    <div v-if="innerVisible" class="mobile-payment-page">
      <div class="mobile-payment-header">
        <i class="el-icon-arrow-left" @click="innerVisible = false"></i>
        <span>订单支付</span>
        <div></div>
      </div>

      <div class="mobile-payment-content">
        <!-- 订单号 -->
        <div class="payment-card">
          <div class="info-row">
            <span class="label">订单编号：</span>
            <span class="value"><b>{{order.oid}}</b></span>
          </div>
        </div>

        <!-- 订单信息 -->
        <div class="payment-card order-info">
          <div class="info-row">
            <span class="label">创建日期：</span>
            <span class="value"><b>{{order.createtime}}</b></span>
          </div>
          <div class="info-row">
            <span class="label">订单状态：</span>
            <span class="value">{{order.pay===1?'未支付':'已支付'}}</span>
          </div>
          <div class="info-row">
            <span class="label">数量：</span>
            <span class="value">{{order.productnumber}}</span>
          </div>
          <div class="info-row total">
            <span class="label">总计：</span>
            <span class="value price">¥{{order.producttotal}}</span>
          </div>
        </div>

        <!-- 商品信息 -->
        <div class="payment-card product-list">
          <div class="product-item" v-for="item in order.products" :key="item.id">
            <img :src="item.images[0]" :alt="item.name"/>
            <div class="product-info">
              <h4>{{item.name}}</h4>
              <p>{{item.details}}</p>
              <div class="delivery-info">工作日、非工作日、全天时段均可配送预计发货后2-4个工作日送达</div>
              <div class="price">¥{{item.currentprice}}</div>
            </div>
          </div>
        </div>

        <!-- 收货信息 -->
        <div class="payment-card delivery-info">
          <div class="info-row">
            <span class="label">收货地址：</span>
            <span class="value">{{order.address}}</span>
          </div>
          <div class="info-row">
            <span class="label">收货人：</span>
            <span class="value">{{order.consignee}}</span>
          </div>
          <div class="info-row">
            <span class="label">联系方式：</span>
            <span class="value">{{order.phone}}</span>
          </div>
        </div>
      </div>

      <!-- 底部支付栏 -->
      <div class="mobile-payment-footer">
        <div class="total-amount">
          <span>需支付：</span>
          <span class="price">¥{{order.producttotal}}</span>
        </div>
        <div class="payment-buttons">
          <el-button type="primary" @click="gotoPay(order)">立即支付</el-button>
          <el-button @click="deletePay(order.oid)">取消订单</el-button>
        </div>
      </div>
    </div>
    <FooterBottom></FooterBottom>
  </div>
</template>

<script type="text/javascript">
  import Search from "../components/Search.vue";
  import FooterBottom from "../components/Footer.vue";
  import moment from "moment";
  export default {
    components: {
      Search,
      FooterBottom
    },
    data() {
      return {
        User: '',//用户信息
        userbuy: '',//买家信息
        data: '',//商品详情信息
        imgblur: '',//图片地址
        currentPage: 1,//当前页
        layout: 'slot,pager,next',//分页显示工具
        textarea: '',//商品详情
        backcolor: '',//商品详情背景颜色
        comments: '',//评论列表
        PageSize:5,//每页显示评论数
        totalCount:1,//评论总量
        love: false,//是否收藏
        outerVisible:false,//外层订单弹窗
        innerVisible:false,//内层订单弹窗
        remark: '',//订单备注
        order: {},//订单返回值
        vendor: {
          userimgpath: '',
          username: '',
          phonenumber: '',
          mail: ''
        },
        isInCart: false,//是否已加入购物车
        rules: {
          username: [
            { required: true, message: '管理员姓名不能为空', trigger: 'blur' },
            { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
          ],
          phonenumber: [
            { required: true, message: '联系方式不能为空', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '收货地址不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      //页面置顶
      window.scrollTo(0, 0);
      //请求用户信息
      this.$axios.get('/user/selectUserById', {
        params: {
          id: this.$store.state.userid
        }
      }).then(res => {
        this.User = res.data;
        this.userbuy = res.data;
      });
      //加载商品详情
      this.loadproductdetails();
      //加载用户评论
      this.loadcomments();
      //点击量+1
      setTimeout(res => {
        this.clickNum();
      },500);
    },
    methods: {
      switchImg(imgPath){
        this.imgblur = imgPath;
      },
      //评论跳转页
      CurrentChange(val) {
        // 改变默认的页数
        this.currentPage=val;
      },
      //鼠标移入
      enter() {
        this.backcolor = "background:#FFFFFF";
      },
      //鼠标移出
      leave() {
        this.backcolor = this.textarea.length === 0 ? "background:#f4f5f7" :
          "background:#FFFFFF;border: 1px solid #00a1d6;";
      },
      //加载商品详情方法
      loadproductdetails(){
        //商品数据详情
        this.$axios.get('/product/selectProductById', {
          params: {id: this.$route.query.id}
        }).then(res => {
          this.data = res.data;
          this.data.images = eval('('+res.data.images+')');
          this.imgblur = this.data.images[0];
          
          // 在商品数据加载完成后加载卖家信息
          this.loadVendorInfo();
        })
      },
      //加载商品列表方法
      loadcomments(){
        //商品评论列表查询
        this.$axios.get('/product/selectCommentById', {
          params: {id: this.$route.query.id}
        }).then(res => {
          this.comments = res.data;
          this.totalCount = res.data.length;
          this.updataProductData(res.data.length);
          this.selectLoveById();
        });
      },
      //修改商品评论数量
      updataProductData(length){
        this.$axios.post('/product/updateProductByUser', {
          id: this.data.id,
          comments: length.toString()
        });
      },
      //判断商品是否收藏
      selectLoveById(){
        this.$axios.post('/product/selectLoveById', {
          uid: this.$store.state.userid,
          pid: this.data.id
        }).then(res => {
          if(res.data > 0){
            this.love = true;
          }else{
            this.love =false;
          }
        });
      },
      //添加商品进收藏方法
      addLove(id){
        //判断是否登录
        if(this.$store.state.userid === 0){
          this.$message({
            message: '请登录！',
            type: 'warning'
          });
          return null;
        }
        //判断是否是自己的商品
        if(this.$store.state.userid === this.data.uid){
          this.$message({
            message: '不能收藏自己发布的商品！',
            type: 'warning'
          });
          return null;
        }
        //判断商品是否下架
        if(this.data.status === '2'){
          this.$message({
            message: '商品已出售！',
            type: 'warning'
          });
          return null;
        }
        this.selectLoveById();
        //判断商品是否添加
        if(!this.love){
          //商品添加收藏
          this.$axios.post('/product/insertProductToLove', {
            uid: this.$store.state.userid,
            pid: id
          }).then(res => {
            if(res.data === 1){
              this.$message({
                message: '商品收藏成功！',
                type: 'success'
              });
              this.love = true;
            }
          })
        }else{
          this.$message({
            message: '请勿重复收藏！',
            type: 'warning'
          });
        }
      },
      //展示用户信息
      showUserInfo(id){
        this.$axios.get('/user/selectUserById',{
          params: {
            id:id
          }
        }).then(res => {
          this.$alert(
            `<div class="seller-info">
              <div class="seller-header">
                <img src="${res.data.userimgpath}" class="seller-avatar" />
                <div class="seller-basic">
                  <div class="seller-name">
                    用户名:${res.data.username}
                   
                  </div>
                   <span class="seller-badge">
                      <i class="el-icon-success"></i>
                      认证卖家
                      <span class="badge-shine"></span>
                    </span>
                </div>
              </div>
              
              <div class="info-section">
                <div class="info-item">
                  <i class="el-icon-mobile-phone"></i>
                  <span class="info-label">联系电话</span>
                  <span class="info-value">${res.data.phonenumber}</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-message"></i>
                  <span class="info-label">邮箱</span>
                  <span class="info-value">${res.data.mail}</span>
                </div>
              </div>

              <div class="info-tips">
                <i class="el-icon-info"></i>
                线下交易请注意安全，建议选择安全的交易地点
              </div>
            </div>`,
            '卖家联系方式',
            {
              dangerouslyUseHTMLString: true,
              confirmButtonText: '我知道了'
            }
          );
        });
      },
      //发布评论
      insertComment(id){
        let date = moment().format('YYYY-MM-DD HH:mm:ss');
        if(this.textarea != null && this.textarea.length <1){
          this.$message({
            message: '内容不能为空！',
            type: 'error'
          });
        }else{
          this.$axios.post('/product/insertComment', {
            uid: this.$store.state.userid,
            pid: id,
            text: this.textarea,
            time: date
          }).then(res => {
             if(res.data === 1){
               this.$message({
                 message: '发布成功！',
                 type: 'success'
               });
               this.textarea = '';
               this.leave();
               this.loadcomments();
             }
          });
        }
      },
      //刷新评论
      refresh(){
        this.loadcomments();
        this.$message({
          message: '刷新成功',
          type: 'success'
        });
      },
      //取消购买
      handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
      },
      //取消购买
      handleClose2(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
      },
      //立即购买
      buy(){
        if(this.$store.state.userid === 0){
          //判断是否登录
          this.$message({
            message: '请登录！',
            type: 'warning'
          });
        }else{
          //判断商品是否下架
          if(this.data.status === '2'){
            this.$message({
              message: '商品已出售！',
              type: 'warning'
            });
            return null;
          }
          //判断是否是自己的商品
          if(this.$store.state.userid === this.data.uid){
            this.$message({
              message: '不能购买自己发布的商品！',
              type: 'warning'
            });
            return null;
          }
          this.outerVisible=true;
        }
      },
      //创建订单
      createOrder(){
        this.outerVisible = false;
        //开始创建订单
        this.$axios.post('/order/insertOrderByOrder', {
          consignee: this.userbuy.username,//收货人
          phone: this.userbuy.phonenumber,//收货人联系方式
          mail: this.userbuy.mail,//收货人邮箱
          address: this.userbuy.address,//收货地址
          remark: this.remark,//订单备注
          cid: this.User.id,//创建人编号
          createperson: this.User.username,//创建人
          createtime: moment().format('YYYY-MM-DD HH:mm:ss'),//创建时间
          productnumber: 1,
          pid: [this.data.id],
          producttotal: this.data.currentprice
        }).then(res => {
          if(res.data.resulto === 1){
            this.innerVisible = true;
            this.selectOrderById(res.data.uuid);
          }
        });
      },
      //订单详情
      selectOrderById(oid){
        this.$axios.get('/order/selectOrderById', {
          params: {
            oid : oid
          }
        }).then(res => {
          res.data.products.forEach((resc,index) => {
            if(resc.images != null){
              resc.images = eval('('+resc.images+')');
            }
          });
          this.order = res.data;
        })
      },
      //订单支付
      gotoPay(order){
        //判断是否支付
        this.$confirm('是否确定付款？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

            this.$axios.post("/order/updateOrderByOid",{
              oid: order.oid,
              pay: '2',
              paytime: moment().format('YYYY-MM-DD HH:mm:ss').toString()
            }).then(res => {
              if(res.data === 1){
                //订单中商品全部下架,支付状态显示已支付
                this.$axios.get('/product/soldOutProduct');
                //邮箱通知卖家
                this.$axios.post('/email/sendMailToUser',{
                  pids: [this.data.id],//商品数组
                });
                this.innerVisible = false;
                //跳转支付界面，进行沙箱模拟支付
                /*setTimeout(res => {
                  window.location.href = "http://localhost:9999/utils/orderPay?oid="+order.oid+"&producttotal="+order.producttotal+"&remark="+order.remark;
                },500);*/
                //跳转我的页面
                let loading = this.$loading({
                  text: "支付成功，即将跳转个人中心页面，请在我的订单模块查询订单状态..."
                });
                setTimeout(()=>{
                  loading.close();
                  this.$router.push('mine');
                },3000);
              }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消付款'
          });
        });
      },
      //删除订单
      deletePay(oid){
        //判断是否支付
        this.$confirm('是否取消订单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post("/order/deleteOrderByOid",{
            oid: oid
          }).then(res => {
            if(res.data === 1){
              this.$message({
                type: 'success',
                message: '订单已取消!'
              });
              this.innerVisible = false;
            }
          });
        });
      },
      //添加商品进入购物车
      addCart(pid){
        if(this.$store.state.userid !== 0){
          //判断是否是自己的商品
          if(this.$store.state.userid === this.data.uid){
            this.$message({
              message: '不能购买自己发布的商品！',
              type: 'warning',
              customClass: 'custom-message'
            });
            return null;
          }
          //判断商品是否下架
          if(this.data.status === '2'){
            this.$message({
              message: '商品已出售！',
              type: 'warning',
              customClass: 'custom-message'
            });
            return null;
          }
          this.$axios.post('/cart/selectCartProductById',{
            pid:pid,
            uid:this.$store.state.userid
          }).then(res => {
            if(res.data === 0){
              //添加商品进入购物车
              this.$axios.post('/cart/insertCartById',{
                pid:pid,
                uid:this.$store.state.userid
              }).then(res => {
                if(res.data === 1){
                  this.$notify({
                    title: '添加成功',
                    message: '商品已加入购物车',
                    type: 'success',
                    position: 'bottom-right',
                    duration: 2000,
                    customClass: 'custom-notify',
                    offset: 50
                  });
                  this.isInCart = true;
                }
              })
            }else{
              this.$notify({
                title: '提示',
                message: '该商品已在购物车中',
                type: 'warning',
                position: 'bottom-right',
                duration: 2000,
                customClass: 'custom-notify',
                offset: 50
              });
              this.isInCart = true;
            }
          });
        }else{
          this.$message({
            message: '请先登录！',
            type: 'warning',
            customClass: 'custom-message'
          });
        }
      },
      //统计点击量
      clickNum(){
        //判断数据库中是否存在当前日期
        this.$axios.post('/utils/selectDateFromStatis',{
          dates: moment().format('YYYY-MM-DD')
        }).then(res => {
          if(res.data.length === 0){
            //如果数据库不存在今天的数据，插入今天日期与默认点击量
            this.$axios.post('/utils/insertDateInStatis',{
              dates: moment().format('YYYY-MM-DD'),
            });
          }else{
            //如果数据库存在今天的数据，获取当日点击量+1
            this.$axios.post('/utils/updateNumInStatis',{
              id: res.data.id,
              visitNum: res.data.visitNum,
              clickNum: (res.data.clickNum+1)
            });
          }
        });
        //商品点击量加一
        this.$axios.post('/product/updateProductByUser',{
          id:this.data.id,
          clicks: (this.data.clicks+1)
        });
      },
      getOpStatusText(status) {
        const statusMap = {
          '0': '未出售',
          '1': '待发货',
          '2': '已发货',
          '3': '已收货',
          '4': '退款中',
          '5': '已退款',
          '6': '拒绝退款'
        }
        return statusMap[status] || status
      },
      
      getOpStatusType(status) {
        const typeMap = {
          '0': 'info',
          '1': 'warning',
          '2': 'primary',
          '3': 'success',
          '4': 'danger',
          '5': 'info',
          '6': 'danger'
        }
        return typeMap[status] || 'info'
      },
      loadVendorInfo() {
        // 确保 data 和 data.uid 存在
        if (this.data && this.data.uid) {
          this.$axios.get('/user/selectUserById', {
            params: { id: this.data.uid }
          }).then(res => {
            this.vendor = res.data;
          });
        }
      }
    },
    computed: {
      isNew() {
        // 判断商品是否是最近7天发布的
        const publishDate = new Date(this.data.creattime);
        const now = new Date();
        const diffDays = Math.ceil((now - publishDate) / (1000 * 60 * 60 * 24));
        return diffDays <= 7;
      },
      
      discount() {
        if (this.data.originalprice && this.data.currentprice) {
          const discount = (this.data.currentprice / this.data.originalprice * 10).toFixed(1);
          return discount < 10 ? discount : null;
        }
        return null;
      }
    }
  }
</script>

<style scoped>
.product-details {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-main {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.product-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  color: #909399;
  font-size: 14px;
  flex-wrap: wrap;
}

.product-stats span {
  margin-right: 20px;
}

.product-showcase {
  display: flex;
  margin-bottom: 30px;
}

.product-images {
  width: 400px;
  margin-right: 40px;
}

.main-image {
  width: 400px;
  height: 400px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-list {
  display: flex;
  margin-top: 10px;
  gap: 10px;
}

.image-item {
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.image-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.image-item:hover::after {
  border-color: #409EFF;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.product-title {
  font-size: 20px;
  color: #303133;
  margin: 0;
  font-weight: 500;
}

.favorite-btn {
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.favorite-btn:hover {
  background-color: #f5f7fa;
}

.favorite-btn i {
  transition: all 0.3s ease;
}

.favorite-btn i.is-favorite {
  color: #F56C6C;
}

.product-meta {
  background: #F5F7FA;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.meta-item {
  margin-bottom: 15px;
  position: relative;
  display: flex;
  align-items: center;
}

.meta-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #909399;
  margin-right: 10px;
}

.price {
  background: linear-gradient(45deg, #ff6b6b, #F56C6C);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(245, 108, 108, 0.2);
}

.original-price {
  color: #909399;
  text-decoration: line-through;
}

.action-buttons {
  margin-top: 30px;
}

.action-buttons .el-button {
  margin-right: 20px;
}

.product-description {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 18px;
  color: #303133;
  margin: 0 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title i {
  color: #409EFF;
}

.description-content {
  color: #606266;
  line-height: 1.8;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
}

.comments-section {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EBEEF5;
}

.comment-input {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.user-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.input-wrapper {
  flex: 1;
  min-width: 0; /* 防止flex子项溢出 */
}

.input-wrapper textarea {
  width: 100%;
  height: 80px;
  padding: 12px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  resize: none;
  transition: all 0.3s;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.input-wrapper textarea:focus {
  border-color: #409EFF;
  outline: none;
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #EBEEF5;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.comment-tags {
  margin-left: auto;
}

.comment-content {
  margin-left: 52px; /* 头像宽度 + gap */
  position: relative;
}

.comment-content::before {
  content: '"';
  position: absolute;
  left: -15px;
  top: -5px;
  font-size: 24px;
  color: #DCDFE6;
  font-family: Arial;
}

.comment-text {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
  margin: 0;
  padding: 8px 16px;
  background: #F5F7FA;
  border-radius: 4px;
  position: relative;
}

.comment-text::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: #F5F7FA;
  transform: rotate(45deg);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .comment-content {
    margin-left: 0;
  }
  
  .comment-user {
    flex-wrap: wrap;
  }
  
  .comment-tags {
    margin-left: 52px;
    margin-top: 4px;
  }
}

.discount-tag {
  margin-left: 10px;
  transform: scale(0.9);
}

.view-text {
  color: #606266;
}

/* 卖家信息弹窗样式 */
.seller-info {
  padding: 10px 0;
}

.seller-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #EBEEF5;
}

.seller-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 2px;
  background: linear-gradient(45deg, #67C23A, #85CE61);
}

.seller-basic {
  flex: 1;
}

.seller-name {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.seller-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(45deg, #67C23A, #85CE61);
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.2);
  animation: badge-pulse 2s infinite;
}

.seller-badge i {
  font-size: 12px;
  margin-right: 4px;
}

.badge-shine {
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

@keyframes badge-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}

.info-section {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 8px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item i {
  font-size: 18px;
  color: #409EFF;
  margin-right: 8px;
}

.info-label {
  color: #909399;
  margin-right: 12px;
  font-size: 14px;
  min-width: 60px;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

.info-tips {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fdf6ec;
  border-radius: 4px;
  font-size: 12px;
  color: #e6a23c;
  line-height: 1.4;
}

.info-tips i {
  font-size: 14px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* 弹窗按钮样式优化 */
.el-message-box__btns .el-button {
  padding: 8px 20px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .info-item {
    flex-wrap: wrap;
  }
  
  .info-value {
    width: 100%;
    margin-top: 4px;
    margin-left: 26px;
  }
}

.status-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.status-badge :deep(.el-badge__content) {
  border: none;
}

.status-badge {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  .product-stats {
    gap: 10px;
  }
  
  .status-badges {
    width: 100%;
    justify-content: flex-start;
  }
}

/* 自定义消息提示样式 */
.custom-message {
  min-width: 300px;
  padding: 12px 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 自定义通知样式 */
.custom-notify {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid;
}

.custom-notify.el-notification--success {
  border-left-color: #67C23A;
}

.custom-notify.el-notification--warning {
  border-left-color: #E6A23C;
}

.custom-notify .el-notification__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-notify .el-notification__content {
  font-size: 14px;
  color: #606266;
}

.custom-notify .el-notification__icon {
  font-size: 20px;
  margin-right: 10px;
}

/* 订单弹窗样式 */
.order-dialog {
  border-radius: 8px;
}

.order-dialog .el-dialog__header {
  padding: 20px 25px;
  border-bottom: 1px solid #EBEEF5;
  margin: 0;
}

.order-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.order-dialog .el-dialog__body {
  padding: 25px;
}

.order-content {
  max-height: 70vh;
  overflow-y: auto;
}

/* 商品预览样式 */
.product-preview {
  background: #f8f9fb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.preview-row {
  display: flex;
  align-items: center;
}

.preview-image {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #EBEEF5;
}

.preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-info {
  padding: 0 15px;
}

.preview-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.preview-desc {
  font-size: 13px;
  color: #909399;
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-price {
  text-align: right;
}

.price-label {
  display: block;
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}

.price-value {
  font-size: 20px;
  font-weight: 600;
  color: #F56C6C;
}

/* 表单样式 */
.buyer-form {
  padding: 0 20px;
}

.buyer-form .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.buyer-form .el-input__inner {
  border-radius: 4px;
}

.buyer-form .el-textarea__inner {
  border-radius: 4px;
}

.form-buttons {
  margin-top: 30px;
  margin-bottom: 0;
  text-align: right;
}

.form-buttons .el-button {
  padding: 12px 25px;
}

/* 滚动条美化 */
.order-content::-webkit-scrollbar {
  width: 6px;
}

.order-content::-webkit-scrollbar-thumb {
  background: #C0C4CC;
  border-radius: 3px;
}

.order-content::-webkit-scrollbar-track {
  background: #F5F7FA;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .order-dialog {
    width: 96% !important;
    margin: 2vh auto !important;
  }
  
  .preview-row {
    flex-direction: column;
    text-align: center;
  }
  
  .preview-image {
    margin: 0 auto 15px;
  }
  
  .preview-info {
    padding: 0;
    margin-bottom: 15px;
  }
  
  .preview-price {
    text-align: center;
  }
  
  .buyer-form {
    padding: 0;
  }
}

/* 移动端适配样式 */
@media screen and (max-width: 768px) {
  /* 商品详情页整体布局 */
  .container {
    width: 100% !important;
    padding: 10px !important;
  }
  
  /* 商品主体信息 */
  .product-main {
    padding: 15px !important;
  }
  
  /* 商品图片展示 */
  .product-showcase {
    flex-direction: column !important;
  }
  
  .product-images {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
  
  .main-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  
  .image-list {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 0;
  }
  
  .image-item {
    flex: 0 0 80px !important;
    margin-right: 10px !important;
  }
  
  /* 商品信息区域 */
  .product-info {
    width: 100% !important;
  }
  
  .product-title {
    font-size: 18px !important;
  }
  
  .product-price {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .current-price {
    font-size: 24px !important;
  }
  
  /* 操作按钮 */
  .action-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .action-buttons .el-button {
    flex: 1;
    min-width: 140px;
  }
  
  /* 评论区域 */
  .comments-section {
    padding: 15px !important;
  }
  
  .comment-input {
    padding: 10px !important;
  }
  
  .comment-wrapper {
    padding: 10px !important;
  }
  
  .comment-user {
    flex-wrap: wrap;
  }
  
  .user-info {
    flex: 1;
    min-width: 150px;
  }
  
  .comment-tags {
    width: 100%;
    margin-top: 8px;
    margin-left: 52px;
  }
  
  /* 订单弹窗 */
  .order-dialog {
    width: 95% !important;
    margin: 5% auto !important;
  }
  
  .order-dialog .el-dialog__body {
    padding: 15px !important;
  }
  
  .product-preview {
    padding: 15px !important;
  }
  
  .preview-row {
    flex-direction: column;
  }
  
  .preview-image {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 15px;
  }
  
  .preview-info {
    text-align: center;
    padding: 0 !important;
    margin-bottom: 15px;
  }
  
  .preview-price {
    text-align: center !important;
  }
  
  .buyer-form {
    padding: 0 !important;
  }
  
  .el-form-item__label {
    float: none !important;
    text-align: left !important;
    padding-bottom: 8px;
  }
  
  .form-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .form-buttons .el-button {
    width: 100%;
    margin: 0 !important;
  }
  
  /* 支付弹窗 */
  .inner-dialog {
    width: 95% !important;
  }
  
  .orderInfo {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .orderInfo .el-col {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  .productInfo {
    height: auto !important;
    max-height: 300px;
  }
  
  .btnClick {
    flex-direction: column;
    gap: 10px;
  }
  
  .btnClick .el-col {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  .btnClick .el-button {
    width: 100%;
  }
  
  /* 分页器 */
  .pagination-wrapper {
    overflow-x: auto;
    padding: 10px 0;
  }
  
  .el-pagination {
    white-space: nowrap;
    justify-content: center;
  }
}

/* 横屏模式优化 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .product-showcase {
    flex-direction: row !important;
  }
  
  .product-images {
    width: 45% !important;
  }
  
  .product-info {
    width: 55% !important;
  }
  
  .preview-row {
    flex-direction: row !important;
  }
  
  .preview-info {
    text-align: left !important;
  }
  
  .preview-price {
    text-align: right !important;
  }
}

.mobile-order-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f7f8fa;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

.mobile-order-header {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  position: relative;
}

.mobile-order-header i {
  font-size: 20px;
  color: #333;
}

.mobile-order-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.mobile-product-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.mobile-product-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  flex: 1;
}

.product-info h3 {
  font-size: 15px;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.product-info .desc {
  font-size: 12px;
  color: #999;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-info .price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
}

.mobile-form {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
}

.order-form .el-form-item__label {
  padding: 0 0 8px;
  line-height: 1.4;
  color: #333;
}

.order-form .el-input__inner,
.order-form .el-textarea__inner {
  border-radius: 4px;
}

.mobile-order-footer {
  background: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
}

.total-price {
  font-size: 14px;
}

.total-price .amount {
  color: #f56c6c;
  font-size: 18px;
  font-weight: 500;
}

.mobile-order-footer .el-button {
  width: 120px;
  height: 40px;
}

/* 滚动条美化 */
.mobile-order-content::-webkit-scrollbar {
  width: 4px;
}

.mobile-order-content::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.mobile-order-content::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-payment-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f7f8fa;
  z-index: 2001;
  display: flex;
  flex-direction: column;
}

.mobile-payment-header {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.mobile-payment-header i {
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.mobile-payment-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.payment-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.info-row .label {
  color: #666;
  min-width: 70px;
}

.info-row .value {
  flex: 1;
  color: #333;
}

.info-row.total {
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
  padding-top: 12px;
}

.price {
  color: #f56c6c;
  font-weight: 500;
}

.product-list .product-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.product-list .product-item:last-child {
  border-bottom: none;
}

.product-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-item .product-info {
  flex: 1;
}

.product-info h4 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
}

.product-info p {
  margin: 0 0 8px;
  font-size: 12px;
  color: #999;
}

.product-info .delivery-info {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.mobile-payment-footer {
  background: #fff;
  padding: 12px 15px;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
}

.total-amount {
  text-align: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.total-amount .price {
  font-size: 20px;
}

.payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-buttons .el-button {
  width: 100%;
  height: 40px;
  margin: 0;
}

/* 滚动条美化 */
.mobile-payment-content::-webkit-scrollbar {
  width: 4px;
}

.mobile-payment-content::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.mobile-payment-content::-webkit-scrollbar-track {
  background: transparent;
}

.vendor-info {
  background: #F5F7FA;
  padding: 20px;
  border-radius: 4px;
  margin-top: 20px;
}

.vendor-details {
  display: flex;
  align-items: center;
  gap: 20px;
}

.vendor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vendor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vendor-basic-info {
  flex: 1;
}

.vendor-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.vendor-contact {
  font-size: 14px;
  color: #606266;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style>
